import React, {
  type PropsWithChildren,
  forwardRef,
  useEffect,
  useImperativeHandle,
  useState,
  useRef,
} from 'react';
import {
  View,
  StyleSheet,
  Text,
  TouchableOpacity,
  Pressable,
  type ViewStyle,
} from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
} from 'react-native-reanimated';
import {PermissionsAndroid} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import {SvgXml} from 'react-native-svg';
import expand from 'assets/Images/expand.svg';
import unfold from 'assets/Images/unfold.svg';
import back from 'assets/Images/back.svg';
import useDimensions from 'hooks/useDimensions';
import {navigationRef} from 'utils/naviRef';
const SlidingPanel = forwardRef(
  (
    props: PropsWithChildren & {
      ExpandLabel?: string;
      contentStyles?: ViewStyle;
    },
    ref,
  ) => {
    useImperativeHandle(ref, () => {
      return {
        updateState: () => {
          // @ts-ignore
          navigationRef.navigate('PoliceIntelligence', {});
        },
        setInactive,
      };
    });
    const hp = useDimensions();
    const translateX = useSharedValue(0);
    const [isExpand, setIsExpand] = useState(true);
    const styles = StyleSheet.create({
      panel: {
        borderRadius: 16,
        elevation: 10,
        position: 'absolute',
        top: 52 * hp,
        left: 24 * hp,
      },
      expand: {
        position: 'absolute',
        right: -140 * hp,
        top: 40 * hp,
        width: 140 * hp,
        height: 60 * hp,
        backgroundColor: '#FFFFFF',
        borderBottomRightRadius: 100 * hp,
        borderTopRightRadius: 100 * hp,
      },
    });
    // 授权
    useEffect(() => {
      PermissionsAndroid.requestMultiple([
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
        PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION,
      ]).then(async () => {});
    }, []);
    const animatedStyle = useAnimatedStyle(() => {
      return {
        transform: [{translateX: translateX.value}],
      };
    });
    const [inactive, setInactive] = useState(false);
    const handlePress = () => {
      translateX.value = withSpring(0);
      setIsExpand(true);
    };
    const goBack = () => {
      navigationRef.goBack();
    };
    return (
      <Animated.View style={[animatedStyle, styles.panel]}>
        <LinearGradient
          colors={['#FCFCFD', '#F6F7F9']}
          useAngle={true}
          angle={180}
          style={{
            borderRadius: 16,
            position: 'relative',
            width: 488 * hp,
            height: 672 * hp,
            ...props.contentStyles,
          }}>
          {isExpand ? (
            <TouchableOpacity
              style={{
                position: 'absolute',
                right: 16 * hp,
                top: 26 * hp,
                paddingLeft: 24,
                paddingBottom: 24,
                zIndex: 100,
              }}
              onPressIn={() => {
                translateX.value = withSpring(-493 * hp);
                setIsExpand(false);
              }}>
              <SvgXml {...{width: 24 * hp, height: 24 * hp}} xml={expand} />
            </TouchableOpacity>
          ) : (
            <Pressable onPressIn={handlePress} style={styles.expand}>
              <View
                style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                <SvgXml {...{width: 24 * hp, height: 24 * hp}} xml={unfold} />
                <Text
                  style={{
                    fontSize: 20 * hp,
                    lineHeight: 60 * hp,
                    marginLeft: 4 * hp,
                  }}>
                  {props.ExpandLabel ? props.ExpandLabel : '展开'}
                </Text>
              </View>
            </Pressable>
          )}
          {props.children}
          {inactive && (
            <Pressable
              onPressIn={goBack}
              style={{
                position: 'absolute',
                top: 27 * hp,
                left: 16 * hp,
                zIndex: 10,
                padding: 5,
              }}>
              <SvgXml {...{width: 24 * hp, height: 24 * hp}} xml={back} />
            </Pressable>
          )}
        </LinearGradient>
      </Animated.View>
    );
  },
);

export default SlidingPanel;
